<template>
	<view class="promotion">
		<view class="border">
			<text class="type">原 密 码</text>
		  <input class="input-w" type="text" v-model="original" placeholder="请输入原密码" />
		</view>
		<view class="border">
			<text class="type">新 密 码</text>
		    <input class="input-w" type="text" v-model="newPassword" value="" placeholder="请输入新密码"/>
		</view>
		<view class="border">
			<text class="type">确认密码</text>
			<input  class="input-w" type="text" v-model="confirmPassword" value="" placeholder="再输入新密码"/>
		</view>
		<view class="confirm">
			<button 
				type="primary" 
				class="custom-button"
				:disabled="confirm"
				@click="confirmSubmit"
			>确认</button>
		</view>
	</view>
</template>

<script>
export default {
	name: '',
	data() {
		return {
			original: '', //原密码
			newPassword: '', //新密码
			confirmPassword: '', //确认密码
		}
	},
	computed: {
		confirm() {
			return !this.original || !this.newPassword || !this.confirmPassword;
		}
	},
	methods: {
		//确认提交
		confirmSubmit() {
			
		}
	}
}

</script>

<style lang="less" scoped>
	@import url('@/static/style/common.less');
	.border {
		height: 88rpx;
		background-color: #ffffff;
		margin-bottom: 3rpx;
		border-bottom: 1rpx solid #D2D2D2;
	}

	.type {
		float: left;
		line-height: 88rpx;
		width: auto;
		height: 31rpx;
		font-size: 29rpx;
		color: #333333;
		margin-left: 31rpx;
	}

	.input-w {
		margin-left: 200rpx;
		padding-top: 25rpx;
		height: 31rpx;
		font-size: 26rpx;
		color: #999999;
		
	}
	.confirm{
		width: 100%;
		position: fixed;
		bottom: 0;
		button{
			width: 100%;
		}
	}
    textarea{
		width: auto;
		height: 50rpx;
	}
</style>
